<template>
  <div class="pension-wrapper">
    <div class="m-pension">
      <dl>
        <dt>推荐民宿</dt>
        <dd
          v-for="(item,index) in cityList"
          :key="index"
          @mouseenter="enter"
          :class="{ active: isActive }"><span :class="item.city">{{ item.name }}</span></dd>
      </dl>
    </div>
    <div class="p-detail">
      <ul class="p-body" v-if="kind">
        <li v-for="(item,index) in currentCity"
            :key="index">
          <el-card :body-style="{ padding:0}">
            <img :src="item.img">
            <div class="title">
              <span>{{ item.title }}</span>
            </div>
            <span class="price">￥{{ item.price }}</span>
          </el-card>

        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "pension",
  data() {
    return {
      kind: 'beijing',
      isActive:false,
      cityList: [
        {
          city: "beijing",
          name: '北京',
          child: [
            {
              title: "【别致生活】望京丨798丨现代简约风一居",
              img: 'http://p0.meituan.net/iphoenix/879a6376a34a8e28eb2ca9b6eefe2a01171724.jpg@740w_416h_1e_1c',
              price: 568
            },
            {
              title: '【阳光浪漫公寓】整租米拉小镇 亦庄 马驹桥火烈鸟（同类型房源随机）',
              img: 'https://img.meituan.net/iphoenix/1f4ba4637bd1a230129ee0b6c10208f0360539.png@740w_416h_1e_1c',
              price: 259
            },
            {
              title: '独立单间卫浴 大床 设施齐全 拎包入住',
              img: 'http://p1.meituan.net/horus/674afde63faa299096cd1fee169a27b78840401.png@740w_416h_1e_1c',
              price: 688
            }

          ]
        },
        {
          city: "guangzhou",
          name: '广州',
          child: [
            {
              title: "《智能4K百寸投影+网络电视》欧式家具北京理工大学 中医药大学 北京师范 良乡大学地铁旁",
              img: 'https://img.meituan.net/phoenix/15942afc5248a259e081ba5847594d3d2118374.jpg@740w_416h_1e_1c',
              price: 568
            },
            {
              title: "《智能4K百寸投影+网络电视》欧式家具北京理工大学 中医药大学 北京师范 良乡大学地铁旁",
              img: 'https://img.meituan.net/phoenix/15942afc5248a259e081ba5847594d3d2118374.jpg@740w_416h_1e_1c',
              price: 568
            },
            {
              title: "《智能4K百寸投影+网络电视》欧式家具北京理工大学 中医药大学 北京师范 良乡大学地铁旁",
              img: 'https://img.meituan.net/phoenix/15942afc5248a259e081ba5847594d3d2118374.jpg@740w_416h_1e_1c',
              price: 568
            },

          ]
        },
        {
          city: "shanghai",
          name: '上海',
          child: [
            {
              title: "万行爱情海，舒适温馨",
              img: 'https://img.meituan.net/phoenix/5d8f1b2c391198048d1b4d8bfe5f4ca4148556.jpg@740w_416h_1e_1c',
              price: 999
            },
            {
              title: "《智能4K百寸投影+网络电视》欧式家具北京理工大学 中医药大学 北京师范 良乡大学地铁旁",
              img: 'http://p1.meituan.net/phoenix/71e49f4264f8eb286a205565069edde7810254.jpg@740w_416h_1e_1c',
              price: 568
            },
            {
              title: "《智能4K百寸投影+网络电视》欧式家具北京理工大学 中医药大学 北京师范 良乡大学地铁旁",
              img: 'https://img.meituan.net/phoenix/c72fb22fc652987163aec44e67f738612657789.jpg@740w_416h_1e_1c',
              price: 568
            },

          ]
        }

      ]
    }
  },
  computed: {
    currentCity() {
      return this.cityList.filter(item => item.city === this.kind)[0].child
    }
  },
  methods: {
    enter(e) {
      this.kind = e.target.querySelector('span').className
      this.isActive = !this.isActive
    }
  }
}
</script>

<style lang="scss">
@import "../../assets/css/index/pension.scss";
</style>
